<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Internationalization (i18n) - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">i18n</a></li>
                    <li class="toc-entry"><a href="#_i18n_about">About</a></li>
                    <li class="toc-entry"><a href="#_i18n_meta">Meta tag</a></li>
                    <li class="toc-entry"><a href="#_i18n_locales">Locales</a></li>
                    <li class="toc-entry"><a href="#_i18n_add_locale">Add Locale</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>i18n</h1>
                <p class="text-leader">
                    Metro 4 ready for internationalization and localisation.
                </p>

                <!-- ads-html -->

                <h3 id="_i18n_about">About</h3>
                <p>
                    Some components in Metro 4 use text labels, example <code>calendar</code> component.
                    Metro 4 supports i18n mechanism to display text labels.
                </p>
                <p>
                    By default components use value of <code>METRO_LOCALE</code> variable. This ia a global variable and can be modified before <code>Metro 4 js</code> loaded.
                    You can set <code>locale</code> for component with special attribute <code>data-locale</code>.
                </p>
                <pre><code class="javascript">
                    &lt;script&gt;
                        window.METRO_LOCALE = "de-DE";
                    &lt;/script&gt;
                    &lt;script src="metro.js"&gt;&lt;/script&gt;
                </code></pre>

                <h3 id="_i18n_meta">Meta tag</h3>
                <p>
                    You can set global locale with <code>&lt;meta&gt;</code> tag. To set it use meta tag with name <code>metro4:locale</code>.
                </p>
                <pre><code class="html">
                    &lt;meta name="metro4:locale" content="uk-UA"&gt;
                </code></pre>

                <h3 id="_i18n_locales">Locales</h3>
                <p>
                    You can get hard stored locales with method <code>Metro.utils.getLocales()</code>.
                </p>
                <pre><code class="javascript">
                    var locales = Metro.utils.getLocales();
                    console.log(locales);
                </code></pre>

                <h3 id="_i18n_add_locale">Add locale</h3>
                <p>
                    You can add own locale at runtime. To add locale you must use method <code>Metro.utils.addLocale()</code>.
                </p>
                <pre><code>
                    &lt;script&gt;
                        Metro.utils.addLocale({
                            'de-DE': {
                                "calendar": {
                                    "months": [
                                        "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember",
                                        "Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"
                                    ],
                                    "days": [
                                        "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag",
                                        "Sn", "Mn", "Di", "Mi", "Do", "Fr", "Sa",
                                        "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"
                                    ],
                                    "time": {
                                        "days": "TAGE",
                                        "hours": "UHR",
                                        "minutes": "MIN",
                                        "seconds": "SEK"
                                    }
                                },
                                "buttons": {
                                    "ok": "OK",
                                    "cancel": "Abbrechen",
                                    "done": "Fertig",
                                    "today": "Heute",
                                    "now": "Jetzt",
                                    "clear": "Reinigen",
                                    "help": "Hilfe",
                                    "yes": "Ja",
                                    "no": "Nein",
                                    "random": "Zufällig"
                                }
                            }
                        });
                    &lt;/script&gt;
                </code></pre>
                <p>
                    if you put your javascript in <code>&lt;head&gt;</code>, you must use method after <code>Metro 4 js</code> loaded.
                    If you put javascript in bottom of page, you must set <code>&lt;meta&gt;</code> tag <code>metro4:init</code> to false and manually initialise Metro 4, after locale is added.
                </p>

                <h6>For head</h6>
                <pre><code>
                    &lt;head&gt;
                        &lt;script src="metro.js"&gt;&lt;/script&gt;
                        &lt;script&gt;
                            Metro.utils.addLocale(...);
                        &lt;/script&gt;
                    &lt;/head&gt;
                </code></pre>

                <h6>For bottom of page</h6>
                <pre><code>
                    &lt;head&gt;
                        &lt;meta name="metro4:init" content="false"&gt;
                    &lt;/head&gt;
                    &lt;body&gt;
                        ...
                        &lt;script src="metro.js"&gt;&lt;/script&gt;
                        &lt;script&gt;
                            Metro.utils.addLocale(...);
                            Metro.init();
                        &lt;/script&gt;
                    &lt;/body&gt;
                </code></pre>
            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>